<template>
	<div>
		<Tips />
		<van-checkbox-group v-model="result" v-if="cartList.length" :disabled="isEditing">
       <van-checkbox v-for="item in cartList":name="item.id":key=item.id @click="checkboxChange(item)">
          <van-swipe-cell>
				    <van-card :num="item.number"
						  :price="item.retail_price"
						  :title="item.goods_name"
						  :thumb="item.list_pic_url" />
            <van-stepper v-model="item.number" v-show="isEditing" @change="stepperChange(item)"/>
            <template #right>
              <van-button square type="danger" text="删除" @click="delGoodsClick(item.product_id)"/>
            </template>
          </van-swipe-cell>
			  </van-checkbox>
			
		</van-checkbox-group>

		<div class="cartBox"
			 v-else>
			<img src="@/assets/custom-empty-image.276c05f0.png"
				 alt="">
			<h3>购物车为空</h3>
		</div>
    
    <!-- 占位div -->
    <div class="zhanwei"></div>

		<van-submit-bar :price="cartTotal.checkedGoodsAmount * 100"
						button-text="提交订单"
						@submit="onSubmit">
			<van-checkbox v-model="checkedAll" :disabled="isEditing">全选</van-checkbox>
			<template #tip>
				累计共{{cartTotal.checkedGoodsCount}}件商品，可点击 <van-button :type="isEditing?'danger': 'info'" size="mini" @click="editClick" :text="isEditing?'完成编辑': '编辑'"></van-button> 按钮进行商品数量修改
			</template>
		</van-submit-bar>
	</div>
</template>

<script>
import Tips from '@/components/detailComp/Tips'
import { getCartList, ChangeGoodChecked,stepperChange,delGoods } from '@/network/api'
export default {
	name: "Cart",
	created() {
		this.getCartList()
	},
	components: { Tips },
	data() {
		return {
			// 控制复选框选中步选中的数组
			result: [],
			// 商品总列表
			cartList: [],
			// 购物车数据
			cartTotal: [],
      // 编辑状态的显示
      isEditing: false
		}
	},
	methods: {
		onSubmit() { },

		// 发起请求获取购物车数据
		getCartList() {
			getCartList().then(res => {
        console.log(res);
				this.cartList = res.data.cartList
				this.cartTotal = res.data.cartTotal
				this.result = []
				this.cartList.map(item => {
					item.checked === 1 ? this.result.push(item.id) : "";
				})
			})
		},

		// 点击复选框发送请求
		checkboxChange(item) {
      if(this.isEditing) return
			ChangeGoodChecked(item.checked === 1 ? 0 : 1, item.product_id).then(res => {
				// console.log(res);
        this.getCartList()
			})
		},
    // 编辑按钮
    editClick() {
      this.isEditing = !this.isEditing
    },
    // 步进器发送改变触发
    stepperChange(item) {
      stepperChange(item.goods_id,item.id,item.number,item.product_id).then(res => {
        if(res.errno ==0) {
          this.getCartList()
        }
      })
    },
    // 删除商品
    delGoodsClick(pid) {
      delGoods(pid.toString()).then(res => {
        if(res.errno == 0) this.getCartList()
      })
    }
	},
	computed: {
		// 判断全选按钮是否勾上
		checkedAll: {
			get() {
        // 什么时候表示全选?? result的长度和cartList的长度一致的时候
			  return this.result.length == this.cartList.length
      },
      set(val) {
        const ids_arr = []
        this.cartList.map(item => {
          ids_arr.push(item.product_id)
        })
        ChangeGoodChecked(val?1:0, ids_arr.join()).then(res => {
          if(res.errno == 0) this.getCartList()
        })
      }
		},
	}
}
</script>

<style lang="less" scoped>
.van-checkbox-group {
	background-color: #fff;
	.van-checkbox {
		padding: 0.1rem 0.12rem;
		border-bottom: 1px solid #ccc;
	}
}

/deep/.van-checkbox__label {
	width: 100%;
	padding: 0.1rem;
}

.van-submit-bar {
	margin-bottom: 0.5rem;
	border-bottom: 1px solid #ccc;
}

.van-button {
	vertical-align: middle;
}
.cartBox {
	width: 1.87rem;
	height: 1.87rem;
	margin-top: 40%;
	margin-left: 50%;
	transform: translateX(-50%);
	img {
		display: block;
		width: 100%;
		height: 100%;
	}
	h3 {
		margin-top: 0.2rem;
		font-size: 0.16rem;
		color: #bfbfbf;
		text-align: center;
	}
}
.van-stepper {
  text-align: right;
}
.van-button--danger {
  height: 100%;
}

.zhanwei {
  width: 100%;
  height: .85rem;
  
}
</style>